<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>树形表格</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0">

	<link rel="stylesheet" href="../../assets/gougu/css/gougu.css">
</head>

<body>
	<div class="p-3">
		<div class="gg-form-bar border-t border-x">
			<button class="layui-btn layui-btn-normal layui-btn-sm">+ 添加部门</button>
		</div>
		<div class="border-b">
			<table class="layui-hide" id="treeTable" lay-filter="treeTable"></table>
		</div>
	</div>
	<script>
		const moduleInit = ['tool','treeGrid'];
		function gouguInit() {
			var treeGrid = layui.treeGrid;
			var treetable = treeGrid.render({
					id: 'treeTable'
					, elem: '#treeTable'
					, idField: 'id'
					,url: "../../json/tabletree.json" //数据接口
					, cellMinWidth: 80
					, treeId: 'id'//树形id字段名称
					, treeUpId: 'pid'//树形父id字段名称
					, treeShowName: 'title'//以树形式显示的字段
					, height: 'full-0'
					, isOpenDefault: true
					, cols: [[
						{ field: 'id', width: 100, title: 'ID号', align: 'center' }
						, { field: 'pid', title: '上级部门ID', width: 120, align: 'center' }
						, { field: 'title', title: '部门名称' }
						, { field: 'leader', title: '部门负责人', width: 120, align: 'center' }
						, { field: 'phone', title: '部门电话', width: 160, }
						, {
							width: 180, title: '操作', align: 'center', templet: function (d) {
								var html = '<span class="layui-btn-group"><button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="add">添加下级部门</button><button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button><button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button></span>';
								return html;
							}
						}
					]]
					, page: false
				});

			//操作按钮
			treeGrid.on('tool(treeTable)', function (obj) {
				if (obj.event === 'add') {
					layer.msg('点击了添加');
					return;
				}
				if (obj.event === 'edit') {
					layer.msg('点击了编辑');
					return;
				}
				if (obj.event === 'del') {
					layer.confirm('确定要删除吗?', { icon: 3, title: '提示' }, function (index) {
						layer.msg('删除吧！');
						layer.close(index);
					});
				}
			});
		}
	</script>
  <script src="../../assets/layui/layui.js"></script>
  <script src="../../assets/gougu/gouguInit.js"></script>
</body>

</html>